import React from 'react';
import IconButton from '@mui/material/IconButton';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
export default function MyHidden(props) {
  // const [state, setState] = React.useState({show_hidden:false});
  // React.useEffect(() => {
  //   console.log("useEffect--------------------------------")
  //   console.log(props)
  //   setState(state => ({ ...state, hidden:props.hidden }));
  // }, [props.hidden]);
  // console.log("MyHidden000000000000000000000000000000000000===")
  // console.log(props);
  // this.state={hidden:props.hidden}
  // console.log("MyHidden000000000000000000000000000000000000");
  // console.log(props);
  return (
    <div
      style={{
        flexDirection: "column",
        display: props.hidden ? "none" : "flex",
        width: '100%',
        overflowX: 'hidden',
        overflowY: 'hidden',
        border: "solid 2px ",
        backgroundColor: "#aaaaaa"
      }}
    >
      <div style={{
        display: "flex",
        flexDirection: "row",
        width: '100%',
        border: "solid 1px ",
        backgroundColor: "#888888"
      }}>
        <Tooltip title="hide">
          <IconButton
            onClick={e => {
              if (props.on_hidden) {
                props.on_hidden();
              }
            }}
          ><CancelPresentationIcon /></IconButton>
        </Tooltip>
        <Typography style={{ width: "100%" }}>{props.title}</Typography>
      </div>
      <div>
        {props.children}
      </div>
    </div>
  );
}
